<template>
  <h3>{{ x }}</h3>
  <button @click="x++">点我加1</button>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ job.j1.salary }}</h1>
  <button @click="name += '-'">点击修改名字</button>
  <button @click="age++">点击修改年龄</button>
  <button @click="job.j1.salary++">涨</button>
</template>
  
<script>
import { ref, reactive, toRef, toRefs, shallowReactive, shallowRef, readonly,shallowReadonly } from "vue";

export default {
  name: "Demo",

  setup() {
    let person = reactive({
      name: "林润钿",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    let x = ref(0);

    person=shallowReadonly(person)  //第一层的数据不能改只能读
    //person=readonly(person)  //所有的数据都只读不能改变


    return {
      ...toRefs(person),
      x,
    };
  },
};
</script>
  
  <style>
</style>
  